<template>
  <div>
      <Row class="body">
        <i-col span="2">POS机编号</i-col>
        <i-col span="3">POS机名称</i-col>
        <i-col span="2">费率</i-col>
        <i-col span="2">扣率</i-col>
        <i-col span="3">详情描述</i-col>
        <i-col span="3">外站连接</i-col>
        <i-col span="3">详情图片</i-col>
        <i-col span="3">火爆程度</i-col>
        <i-col span="3">操作</i-col>
      </Row>

      <Row class="list" v-for="item of bankList" :key="item.name">
        <i-col span="2">{{item.posId}}</i-col>
        <i-col span="3"><i-input v-model="item.posName"  style="width:200px"/></i-col>
        <i-col span="2"><i-input v-model="item.rate"  style="width:50px"/></i-col>
        <i-col span="2"><i-input v-model="item.deductionate"  style="width:50px"/></i-col>
        <i-col span="3"><i-input v-model="item.detilText"  style="width:200px"/></i-col>
        <i-col span="3"><i-input v-model="item.instructions4Use"  style="width:200px"/></i-col>
        <i-col span="3">
          <img :src="item.detilImg"  style="width:50px;height:50px">
          <UploadImg  :bankId="item.posId" @showParentComp="showParentComp"></UploadImg>
        </i-col>
        <i-col span="3">
          <select v-model="item.identifier" style="width:150px">
              <option value="1" key="1">
                热
              </option>
              <option value="2" key="2">
                爆
              </option>
          </select>
        </i-col>
        <i-col span="3"><i-button type="info" size="small"  @click="handleUpdateManager(item.posId,item.posName,item.rate,item.deductionate,item.detilText,item.detilImg,item.instructions4Use,item.identifier)">修改</i-button>|<i-button type="error" size="small"  @click="handleDelManager(item.posId)">删除</i-button></i-col>
      </Row>
  </div>
</template>

<script>
import axios from 'axios'
import UploadImg from './UploadImg'
export default {
  name: 'BankList',
   components: {
    UploadImg
  },
  data () {
    return {
        bankList:''
      }
  },
  methods: {
    showParentComp(data,id){
      console.log('data=============',data)
      console.log('id=============',id)
      for (let index = 0; index < this.bankList.length; index++) {
        const element = this.bankList[index];
        if(element.posId===id){
          element.detilImg=data
        }
      }
    },
    getListInfo () {
      axios.post('/web/api/podji/list').then(this.getListInfoSucc)
    },
    getListInfoSucc (res) {
      this.bankList = res.data.date
    },
    handleUpdateManager (posId,posName,rate,deductionate,detilText,detilImg,instructions4Use,identifier) {
      axios.post('/web/api/podji/edit',{"posId":posId,"posName":posName,"rate":rate,"deductionate":deductionate,"detilText":detilText ,"detilImg":detilImg,"instructions4Use":instructions4Use,"identifier":identifier}).then(this.updateInfoSucc)
    },
    updateInfoSucc (res) {
      console.log('修改', res)
      this.$Message.success("修改成功")
      this.getListInfo();
    },
    handleDelManager (posId) {
      this.$Modal.confirm({
          title: '提示框',
          content: '<p>删除后将无法恢复，您确定要删除吗？</p>',
          loading: true,
          onOk: () => {
              setTimeout(() => {
                    this.$Modal.remove();
                    axios.post('/web/api/podji/delete',{"posId":posId}).then(this.delInfoSucc)
              }, 2000);
          }
      });

    },
    delInfoSucc (res) {
      this.$Message.success(res.data.message)
      this.getListInfo();
    }
  },
  mounted () {
    this.getListInfo();
  }
}
</script>
<style lang="stylus" scoped>
  .body
    width: 100%
    line-height 3
    font-size 14px
    color #2680c4
    background #eff3fa
    text-align center
  .list
    line-height 3
    font-size 14px
    text-align center
    color #2680c4


</style>

